<template>
  <div class="personalCenter-container">
    <!-- 标题 start -->
    <el-card style="margin-bottom: 10px">
      <div
        style="display: flex;flex-direction: row;justify-content: space-between"
      >
        <div>
          <div class="verticalBar"></div>
          <span style="color: #1074fd">账户接码</span>
        </div>
        <div>
          <span style="color: #999999;font-size: 12px">数据每日00:00更新</span>
        </div>
      </div>
    </el-card>
    <el-card style="position: relative">
      <div style="margin: 30px">
        <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 900px">
          <el-tab-pane label="首次接码" name="first">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="国家:">
                <el-select v-model="formInline.type" placeholder="选择国家">
                  <el-option label="柬埔寨" value=1></el-option>
                  <el-option label="香港" value=2></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="service:">
                <el-select v-model="formInline.service" placeholder="选择app">
                  <el-option label="Twitter" value="Twitter"></el-option>
                  <el-option label="Instagram" value="Instagram"></el-option>
                  <el-option label="Tiktok" value="Tiktok"></el-option>
                  <el-option label="Tinder" value="Tinder"></el-option>
                  <el-option label="Google" value="Google"></el-option>
                  <el-option label="Whatsapp" value="Whatsapp"></el-option>
                  <el-option label="Mitron" value="Mitron"></el-option>
                  <el-option label="YouTube" value="YouTube"></el-option>
                  <el-option label="Likee" value="Likee"></el-option>
                  <el-option label="Messenger" value="Messenger"></el-option>
                  <el-option label="Facebook" value="Facebook"></el-option>
                  <el-option label="PongPong" value="PongPong"></el-option>
                  <el-option label="BOTIM" value="BOTIM"></el-option>
                  <el-option label="Koo" value="Koo"></el-option>
                  <el-option label="Signal" value="Signal"></el-option>
                  <el-option label="Tiki" value="Tiki"></el-option>
                  <el-option label="LINE" value="LINE"></el-option>
                  <el-option label="Zalo" value="Zalo"></el-option>
                  <el-option label="Duo" value="Duo"></el-option>
                  <el-option label="imo HD" value="imo HD"></el-option>
                  <el-option label="Clubhouse" value="Clubhouse"></el-option>
                  <el-option label="Moj" value="Moj"></el-option>
                  <el-option label="Telegram" value="Telegram"></el-option>
                  <el-option label="KakaoTalk" value="KakaoTalk"></el-option>
                  <el-option label="VK" value="VK"></el-option>
                  <el-option label="BIGO" value="BIGO"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">新增</el-button>
              </el-form-item>
            </el-form>
            <el-table
              :data="tableData"
              border
              style="width: 900px">
              <el-table-column
                prop="service"
                label="service"
                width="180">
              </el-table-column>
              <el-table-column
                prop="phone"
                label="手机号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="seqno"
                label="seqno"
                width="180">
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="getCode(scope)">获取验证码</el-button>
                </template>
              </el-table-column>
              <el-table-column
                prop="code"
                label="code">
              </el-table-column>
            </el-table>
            <div style="display: inline-block;color: red;margin: 30px 0">当前已经获取code为： {{selfNum}},剩余获取code数为： {{codeNum - selfNum}}</div>
            <div style="display: inline-block;color: red;margin: 30px 30px" v-if="codeNum - selfNum === 0">账号获取的code数已用完，请尽快联系客户经理!</div>
          </el-tab-pane>
          <el-tab-pane label="重复接码" name="second">
            <el-form :inline="true" :model="formInline1" class="demo-form-inline">
              <el-form-item label="国家:">
                <el-select v-model="formInline1.type" placeholder="选择国家">
                  <el-option label="柬埔寨" value=1></el-option>
                  <el-option label="香港" value=2></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="service:">
                <el-select v-model="formInline1.service" placeholder="选择app">
                  <el-option label="Twitter" value="Twitter"></el-option>
                  <el-option label="Instagram" value="Instagram"></el-option>
                  <el-option label="Tiktok" value="Tiktok"></el-option>
                  <el-option label="Tinder" value="Tinder"></el-option>
                  <el-option label="Google" value="Google"></el-option>
                  <el-option label="Whatsapp" value="Whatsapp"></el-option>
                  <el-option label="Mitron" value="Mitron"></el-option>
                  <el-option label="YouTube" value="YouTube"></el-option>
                  <el-option label="Likee" value="Likee"></el-option>
                  <el-option label="Messenger" value="Messenger"></el-option>
                  <el-option label="Facebook" value="Facebook"></el-option>
                  <el-option label="PongPong" value="PongPong"></el-option>
                  <el-option label="BOTIM" value="BOTIM"></el-option>
                  <el-option label="Koo" value="Koo"></el-option>
                  <el-option label="Signal" value="Signal"></el-option>
                  <el-option label="Tiki" value="Tiki"></el-option>
                  <el-option label="LINE" value="LINE"></el-option>
                  <el-option label="Zalo" value="Zalo"></el-option>
                  <el-option label="Duo" value="Duo"></el-option>
                  <el-option label="imo HD" value="imo HD"></el-option>
                  <el-option label="Clubhouse" value="Clubhouse"></el-option>
                  <el-option label="Moj" value="Moj"></el-option>
                  <el-option label="Telegram" value="Telegram"></el-option>
                  <el-option label="KakaoTalk" value="KakaoTalk"></el-option>
                  <el-option label="VK" value="VK"></el-option>
                  <el-option label="BIGO" value="BIGO"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="formInline1.phone" placeholder="手机号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit1" v-loading.fullscreen.lock="fullscreenLoading">{{codeName}}</el-button>
              </el-form-item>
            </el-form>
            <div style="margin: 30px 0">获取验证码为：{{codeAgain || '空'}}</div>
            <div style="color: red;margin: 30px 0">当前重复获取code总数为： {{codeSum || 0}},个人重复获取code数为： {{selfSum || 0}}</div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
  import md5 from "@/network/api/MD5";
  import API from "@/network/api/decode";
  export default {
    name: 'index',
    data () {
      return {
        fullscreenLoading: false,
        activeName: 'first',
        formInline1: {
          type: '',
          phone: '',
          service: '',
          num: 1,
          cust: 'hz',
          timestamp: '',
          username: ''
        },
        formInline: {
          type: '',
          num: 1,
          service: '',
          phone: '',
          cust: 'hz',
          timestamp: '',
          username: ''
        },
        search: {
          type: '',
          username: '',
          organId: ''
        },
        tableData: [],
        code: {
          type: '',
          service: '',
          cust: 'hz',
          phone: '',
          seqno: '',
          username: ''
        },
        codeNum: '',
        selfNum: '',
        selfSum: '',
        codeSum: '',
        codeName: '生成seqno',
        seqo: '',
        codeAgain: '',
        timeClear: 0
      }
    },
    created () {
      this.getPage()
    },
    reload () {},
    methods: {
      handleClick (tab, event) {
        console.log(tab, event)
      },
      onSubmit () {
        console.log(JSON.parse(localStorage.getItem("userInfoDecode")).userName)
        if (this.formInline.type === '' || this.formInline.service === '' || this.codeNum - this.selfNum === 0) {
          this.$message.error('查询内容为空，剩余控数不足！')
        } else {
          var timestamp = this.timest()
          this.formInline.username =  JSON.parse(localStorage.getItem("userInfoDecode")).userName
          this.formInline.timestamp = timestamp
          this.formInline.sign = md5.hex_md5('apiId=5548106e6122ea211be2378ec194c72f&service=' + this.formInline.service + '&cust=hz&num=1&timestamp=' + timestamp + '&phone=')
          API.queryData(this.formInline).then(res => {
            if (res.data === 'fail') {
              this.$message.error('生成失败,当前没有可获取的手机号')
            } else {
              this.$message.success('新增成功')
              this.getPage()
            }
          })
        }
      },
      onSubmit1 () {
        if (this.codeName === '生成seqno') {
          var timestamp = this.timest()
          this.formInline1.username = JSON.parse(localStorage.getItem("userInfoDecode")).userName
          this.formInline1.timestamp = timestamp
          this.formInline1.sign = md5.hex_md5('apiId=5548106e6122ea211be2378ec194c72f&service=' + this.formInline1.service + '&cust=hz&num=1&timestamp=' + timestamp + '&phone=' + this.formInline1.phone)
          API.getCodeAgain(this.formInline1).then(res => {
            console.log(res.data)
            if (res.data) {
              this.$message.success('生成成功')
              this.seqo = res.data.seqno
              this.codeName = '获取验证码'
            } else {
              this.$message.error('生成失败')
            }
          })
        } else {
          this.fullscreenLoading = true
          const codeAg = {
            service: this.formInline1.service,
            username: JSON.parse(localStorage.getItem("userInfoDecode")).userName,
            phone: this.formInline1.phone,
            seqno: this.seqo,
            cust: 'hz',
            type: this.formInline1.type
          }
          const timeSet = setInterval(() => {
            API.getCode(codeAg).then(res => {
              if (res.data[1]) {
                this.$message.success('成功获取验证码')
                this.codeAgain = res.data[1].replace(/[^0-9]/ig, '')
                this.codeName = '生成seqno'
                clearInterval(timeSet)
                this.fullscreenLoading = false
                this.timeClear = 0
              } else {
                this.timeClear = this.timeClear + 1
                console.log(this.timeClear, 'this.timeClear')
                if (this.timeClear === 60) {
                  this.$message.error('当前获取超时，请重新获得seqno')
                  this.codeName = '生成seqno'
                  clearInterval(timeSet)
                  this.fullscreenLoading = false
                  this.timeClear = 0
                }
                this.$message.error('获取失败')
              }
            })
          }, 5000)
        }
      },
      timest () {
        var tmp = Date.parse(new Date()).toString()
        tmp = tmp.substr(0, 10)
        return tmp
      },
      getPage () {
        this.fullscreenLoading = true
        this.search.username = JSON.parse(localStorage.getItem("userInfoDecode")).userName
        this.search.type = this.formInline.type
        this.search.organId = JSON.parse(localStorage.getItem("updateUserInfo")).organId
        API.page(this.search).then(res => {
          this.tableData = res.data.list
          this.tableData.forEach(item => {
            if (item.code) {
              item.code = item.code.replace(/[^0-9]/ig, '')
            }
          })
          this.codeNum = res.data.totalCount
          this.selfNum = res.data.selfCount
          this.selfSum = res.data.selfSum
          this.codeSum = res.data.totalSum
          this.fullscreenLoading = false
        })
      },
      getCode (scope) {
        this.code.type = scope.row.type
        this.code.service = scope.row.service
        this.code.phone = scope.row.phone
        this.code.seqno = scope.row.seqno
        if (this.code.type === '' || this.code.service === '') {
          this.$message.error('查询内容不可为空')
        } else {
          this.fullscreenLoading = true
          const timeSet = setInterval(() => {
            this.code.username = JSON.parse(localStorage.getItem("userInfoDecode")).userName
            console.log(this.code, 'this.code')
            API.getCode(this.code).then(res => {
              if (res.data[1]) {
                clearInterval(timeSet)
                this.fullscreenLoading = false
                this.timeClear = 0
                this.getPage()
              } else {
                this.timeClear = this.timeClear + 1
                if (this.timeClear === 60) {
                  this.$message.error('当前获取超时')
                  clearInterval(timeSet)
                  this.fullscreenLoading = false
                  this.timeClear = 0
                }
              }
            })
          }, 5000)
        }
      }
    }
  }
</script>

<style scoped>
  /deep/ #updBox .el-upload-list__item-name {
    margin-top: 3px;
  }

  /deep/ #updBox .el-upload-list__item:first-child {
    margin-top: -34px;
  }

  /deep/ #updBox .el-upload-list {
    padding: 0 10px;
  }
  .videoGroup {
    display: inline-block;
    margin-top: 20px;
    margin-right: 40px;
  }
  .videoGroupTit {
    color: #666666;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 14px;
    line-height: normal;
    margin-top: 4px;
  }
  .videoGroupTitN {
    color: #9B9B9B;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 10px;
    line-height: normal;
    letter-spacing: 0px;
    text-align: left;
  }
  .videoGroupItem {
    border-radius: 4px;
    background: #222222;
    width: 100px;
    height: 100px;
    display: inline-block !important;
    position: relative;
  }
  .worldGroupItem {
    border-radius: 4px;
    width: 100px;
    height: 100px;
    display: inline-block !important;
    position: relative;
  }
  .videoGroupImg {
    width: 30px;
    height: 30px;
    margin: 34px 0 0 34px;
  }
  .videoSize {
    color: white;
    font-size: 10px;
    line-height: 10px;
    position: absolute;
    bottom: 8px;
    right: 8px;
  }
  .videoTime {
    color: white;
    font-size: 10px;
    line-height: 10px;
    position: absolute;
    bottom: 8px;
    left: 8px;
  }
  .videoFoot {
    opacity: 0.10000000149011612;
    border-radius: 0px 0px 0px 0px;
    background: #FFFFFF;
    width: 128px;
    height: 26px;
    position: absolute;
    bottom: 0;
  }
  .videoImg {
    width: 30px;
    height: 30px;
    margin-top: 48px;
  }
  .videoSuccess {
    border-radius: 4px;
    background: #222222;
    width: 128px;
    height: 128px;
    position: relative;
  }
  .uploadIcon {
    border-radius: 4px;
    background: #F2F2F2;
    width: 100px;
    height: 100px;
    margin-top: 20px;
  }
  .uploadIcon1 {
    border-radius: 4px;
    background: #F2F2F2;
    width: 100px;
    height: 100px;
  }
  .uploadText {
    color: #666666;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 14px;
    line-height: normal;
    margin-left: 5px;
  }
  .buttonDel {
    border-radius: 4px;
    background: #FF7A00;
    color: #ffffff;
    position: absolute;
    right: 36px;
    top: 25px;
  }
  .worldTit {
    color: #1074FD;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 16px;
    line-height: 22px;
  }
  .worldText {
    color: #9B9B9B;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 12px;
    line-height: 12px;
    margin-top: 9px;
  }
  .verticalBar {
    width: 3px;
    height: 18px;
    background: #1074fd;
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    margin-top: 2px;
  }
  .videoItem {
    color: #464646;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 18px;
    line-height: 42px;
    width: 102px;
    height: 44px;
    background: #DCDCDC;
    display: inline-block;
    text-align: center
  }
  .selectItem {
    color: #ffffff;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 18px;
    line-height: 42px;
    width: 102px;
    height: 44px;
    background: #1074FD;
    display: inline-block;
    text-align: center
  }
</style>
